import React from 'react';
import { Card, Row, Col } from 'antd';
import { CompressOutlined } from '@ant-design/icons';
import Link from 'next/link';
import Layout from '../../components/layout/Layout';
import styles from '../../styles/ToolsPage.module.css';

const FileToolsPage = () => {
  const fileTools = [
    {
      id: 'compress',
      title: '文件压缩',
      icon: <CompressOutlined />,
      description: '支持多种格式的文件压缩，减小文件体积方便分享和存储',
      link: '/file-tools/compress'
    },
    // 未来可以添加更多文件工具
  ];

  return (
    <Layout title="文件工具 - 在线工具平台" description="高效便捷的在线文件处理工具">
      <div className={styles.toolsHeader}>
        <div className={styles.container}>
          <h1 className={styles.pageTitle}>文件工具</h1>
          <p className={styles.pageDescription}>
            提供高效便捷的在线文件处理工具，无需安装专业软件，轻松处理您的文件
          </p>
        </div>
      </div>

      <div className={styles.toolsContent}>
        <div className={styles.container}>
          <Row gutter={[24, 24]}>
            {fileTools.map(tool => (
              <Col xs={24} sm={12} md={8} key={tool.id}>
                <Link href={tool.link}>
                  <Card className={styles.toolCard} hoverable>
                    <div className={styles.toolIcon}>{tool.icon}</div>
                    <h3 className={styles.toolTitle}>{tool.title}</h3>
                    <p className={styles.toolDescription}>{tool.description}</p>
                  </Card>
                </Link>
              </Col>
            ))}
          </Row>
        </div>
      </div>
    </Layout>
  );
};

export default FileToolsPage; 